<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        .container {
            overflow: hidden;
            border: 8px solid red;
        }

        .container img {
            width: 100%;
            height: 100%;
        }

        .container .list {
            width: 1800px;
        }

        .container .item {
            height: 400px;
            float: left;
        }
    </style>

    <div class="container">
        <ul class="list  clearfix">
            <li class="item "><img src="img/Tesla (10).jpeg" alt=""></li>
            <li class="item "><img src="img/Tesla (11).jpeg" alt=""></li>
            <li class="item "><img src="img/Tesla (12).jpeg" alt=""></li>
        </ul>
    </div>



    <script>
        var items = document.getElementsByClassName("item");
        var list = document.getElementsByClassName("list")[0];
        var container = document.getElementsByClassName("container")[0];

        // 获取当前设备屏幕的宽度
        var device_width = window.innerWidth;
        console.log(device_width);

        // 设置容器宽度
        container.style.width = device_width + 'px';

        // 设置图片容器的宽度
        list.style.width = (items.length * device_width) + 'px';

        // 设置图片宽度
        for (let i = 0; i < items.length; i++) {
            items[i].style.width = device_width + 'px';
        }


        var state = {
            beginX: 0,
            endX: 0,
            nowX: 0,  // 当前位置 x 坐标 
            index: 0
        }

        // 复位
        var _reset = function () {
            list.style.transition = "all 0.3s";
            let reset_distance = ((state.index + 1) * device_width);
            list.style.marginLeft = - reset_distance + 'px';
        }

        // 上一张
        var _goPrev = function () {

        }


        function move_image(distance) {
            list.style.marginLeft = distance + 'px';
            list.style.transition = "all 0.3s";
        }



        function get_state() {
            let touch_state = {
                direction: "",
                move_distance: "",
            }
            // 如果是 负数, 表示向右滑动 , 上一张
            // 如果是 正数, 表示向左滑动 , 下一张
            let deltaX = state.beginX - state.endX;
            if (deltaX < 0) {
                touch_state.direction = "上一张"
            } else if (deltaX > 0) {
                touch_state.direction = "下一张"
            }
            move_distance = deltaX;
            return touch_state;
        }

        console.log(get_state());


        // 判断是否需要移动
        var _judgeMove = function () {

            // 如果是 负数, 表示向右滑动 , 上一张
            // 如果是 正数, 表示向左滑动 , 下一张
            let deltaX = state.beginX - state.endX;

            // 如果滑动的距离大于屏幕的 2/5 的话
            if (deltaX >= window.innerWidth * (2 / 5)) {
                if (state.index === 2) return;
                state.index++;
                console.log("index     :   " + state.index);
                move_image(- (state.index * device_width))
                console.log("下一张");
            } else if (deltaX <= - window.innerWidth * (2 / 5)) {
                if (state.index === 0) return;
                console.log("index     :   " + state.index);
                state.index--;
                move_image(- (state.index * device_width))
                console.log("上一张");
            } else {
                console.log("不动");
                _reset()
            }
        }
        // 触摸开始
        container.addEventListener('touchstart', function (e) {
            list.style.transition = "none"; // 去除过度
            state.beginX = e.targetTouches[0].clientX; // 获取点击的坐标
            console.log("touchstart   " + state.beginX);
            console.log(list.style.marginLeft);
        })

        container.addEventListener('touchmove', function (e) {
            let nowX = e.changedTouches[0].clientX;  // 获取滑动时的实时坐标
            // console.log(nowX);
            state.nowX = nowX;
            let deltaX = state.beginX - nowX;
            console.log(deltaX + "     ----   " + list.style.marginLeft);
            list.style.marginLeft = - (device_width * state.index + deltaX) + 'px';
        })

        // 触摸取消
        container.addEventListener('touchend', function (e) {
            state.endX = e.changedTouches[0].clientX;
            _judgeMove();
        })
    </script>


</body>

</html>